<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>

<%--<a href="/jquery/msa">aaa</a>


<form action="/jquery/msa" method="post">

</form>--%>


<%--<button id="sendbtn">发送异步请求</button>--%>

<button id="sendbtn1">post发送异步请求接收json</button>
<button id="sendbtn2">post发送异步请求传递json</button>
<button id="sendbtn3">$.getjson发送异步请求传递并接收json</button>


<script>

    $("#sendbtn3").on('click', function () {
        // let data = JSON.stringify({'name': 'root', 'age': 60, "email": 'root@qq.com'});
        let data = {'name': 'root', 'age': 60, "email": 'root@qq.com'};
        $.getJSON('http://localhost:8080/jquery/msd', data, function (result) {
            console.log(result);
        })

        /*   $.getJSON('http://localhost:8080/jquery/msb', function (data) {
               console.log('成功获取 JSON 数据:', data);
           }).fail(function () {
               console.error('请求失败');
           });*/
    });


    /* $("#sendbtn").on('click', function () {
         $.ajax({
             url: 'http://localhost:8080/jquery/msa',
             type: 'get',
             success: function (data) {
                 console.log(data);
             }
         })
     });*/

    $("#sendbtn1").on('click', function () {
        $.ajax({
            url: 'http://localhost:8080/jquery/msb',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                // console.log(data);
                $("body").append($("<h2>").html(data.name));
                $("body").append($("<h2>").html(data.age));
                $("body").append($("<h2>").html(data.email));

            }
        })
    });


    var jsonobj = {
        'name': 'zhangsan',
        'age': 80,
        'email': 'zhangsan@gmail.com'
    };

    var s = JSON.stringify(jsonobj);


    $("#sendbtn2").on('click', function () {
        $.ajax({
            url: 'http://localhost:8080/jquery/msc',
            type: 'post',
            data: s,
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $('body').append($("<div>").text(data.name));
                $('body').append($("<div>").text(data.age));
                $('body').append($("<div>").text(data.email));
            }
        })
    });

</script>
</body>
</html>